import React, {Component} from 'react';

class LifeComponent extends Component {
  state = {
    name: ''
  };


  constructor(props) {
    super(props);
    console.log('constructor')
  }


  /*实例期*/
  componentWillMount() {
    console.log('componentWillMount');
  }

  render() {
    console.log('render');
    return (
      <div>
        <button onClick={() => {
          this.setState({name: '啦啦啦啦'})
        }}>改变state
        </button>
      </div>
    );
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  /*
  * 存在期 (更新阶段)  props发生改变的时候会执行这个生命周期
  * */
  componentWillReceiveProps(nextProps, nextContext) {
    console.log('componentWillReceiveProps')
  }

  shouldComponentUpdate(nextProps, nextState, nextContext) {
    console.log('shouldComponentUpdate');
    // 什么时候应该返回true
    //   state 发生改变
    //   props 发生改变
    // 什么时候应该返回false
    //

    return (this.state.name !== nextState.name) ||
      (this.props.value !== nextProps.value);
  }

  /*
    render() {
      return (
        <div>

        </div>
      );
    }*/

  componentWillUpdate(nextProps, nextState, nextContext) {
    console.log('componentWillUpdate')
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate')
  }


  componentWillUnmount() {
    console.log('componentWillUnmount')
  }
}

export default LifeComponent;
